<!--
参数this.shadeClose = !this.shadeClose关闭遮罩
参数this.shadeOpen = !this.shadeOpen打开遮罩
参数this.editClose = !this.editClose;使其不能够修改
参数this.editOpen = !this.editOpen;使其能够修改
参数this.searhDatas = !this.searhDatas 实现查询数据
参数this.searhDatas = !this.searhDatas  而且 this.searhDatas_ = this.data 实现显示传递的数据，不查询数据
参数this.searhDatas = !this.searhDatas  而且 this.searhDatas_ = this.data 实现显示传递的数据，不查询数据
params:{
    id
    ldhm
    mtly;
    bjhm
    other_id
    zryy
    zxcp
    gtnr
}
--->
<template>
    <div id="hotCenter_hwzx_khxx_" class="container-fluid">
        <div id="details">
            <fieldset class="layui-elem-field site-demo-button" style="position:relative">
                <legend>客户信息</legend>
                <div id="editable" :class="{'layui-layer-shade':editable}" style="z-index: 2; background-color: rgb(0, 0, 0); opacity: 0;display:block;position:absolute;height:100%;"></div>
                <div id="shade" :class="{'layui-layer-shade':shade}" style="z-index: 2; background-color: rgb(0, 0, 0); opacity: 0.1;display:block;position:absolute;height:100%;"></div>
                <div style="padding: 20px 0px" action="">
                    <el-form ref="saveDatas" :rules="rules" :inline="true" :model="saveDatas" :label-position="labelPosition" label-width="110px" class="padding" >
                        <el-form-item label="客户名称" prop="khmc">
                            <el-input v-model="saveDatas.khmc" style="width:300px"></el-input>
                        </el-form-item>
                        <el-form-item label="年龄段" prop="nld">
                            <el-select v-model="saveDatas.nld" placeholder="请选择" style="width:300px">
                                <el-option label="" value=""></el-option>
                                <el-option
                                        v-for="item in datas['年龄段']['children']"
                                        :key="item.id"
                                        :label="item.text"
                                        :value="item.text">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="性别" prop="khxb">
                            <div style="width:300px">
                                <el-radio class="radio" v-model="saveDatas.khxb" label="1" >男</el-radio>
                                <el-radio class="radio" v-model="saveDatas.khxb" label="2">女</el-radio>
                            </div>
                        </el-form-item>
                        <el-form-item label="职  业" prop="zy">
                            <el-select v-model="saveDatas.zy" style="width:300px" placeholder="请选择">
                                <el-option label="" value=""></el-option>
                                <el-option
                                        v-for="item in datas['职  业']['children']"
                                        :key="item.id"
                                        :label="item.text"
                                        :value="item.text">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="手机号码" prop="sjhm">
                            <el-input v-model="saveDatas.sjhm" style="width:300px"></el-input>
                        </el-form-item>
                        <el-form-item label="家庭电话" prop="jtdh">
                            <el-input v-model="saveDatas.jtdh" style="width:300px"></el-input>
                        </el-form-item>
                        <el-form-item label="工作电话" prop="gzdh">
                            <el-input v-model="saveDatas.gzdh" style="width:300px"></el-input>
                        </el-form-item>
                        <el-form-item label="最后来电" prop="zhld">
                            <el-input v-model="saveDatas.zhld" style="width:300px"></el-input>
                        </el-form-item>
                        <el-form-item label="省份/城市/区县" prop="sfcsqx">
                            <el-cascader
                                    style="width:300px"
                                    v-model="saveDatas.sfcsqx"
                                    :options="selectArea">
                            </el-cascader>
                        </el-form-item>
                        <el-form-item label="详细地址" prop="xxdz">
                            <el-input v-model="saveDatas.xxdz" style="width:1150px"></el-input>
                        </el-form-item>
                        <el-form-item label="号码归属地" prop="hmgsd">
                            <el-input v-model="saveDatas.hmgsd" style="width:1150px"></el-input>
                        </el-form-item>
                        <el-form-item label="邮政编码" prop="yzbm">
                            <el-input v-model="saveDatas.yzbm" style="width:300px"></el-input>
                        </el-form-item>
                        <el-form-item label="客户质量" prop="khzl">
                            <el-select v-model="saveDatas.khzl" style="width:300px" placeholder="请选择">
                                <el-option label="" value=""></el-option>
                                <el-option
                                        v-for="item in datas['客户质量']['children']"
                                        :key="item.id"
                                        :label="item.text"
                                        :value="item.text">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="客户来源" prop="khly">
                            <el-select v-model="saveDatas.khly" style="width:300px" placeholder="请选择">
                                <el-option label="" value=""></el-option>
                                <el-option
                                        v-for="item in datas['客户来源']['children']"
                                        :key="item.id"
                                        :label="item.text"
                                        :value="item.text">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="客户需求" prop="khxq">
                            <el-select v-model="saveDatas.khxq" style="width:300px" placeholder="请选择">
                                <el-option label="" value=""></el-option>
                                <el-option
                                        v-for="item in datas['客户需求']['children']"
                                        :key="item.id"
                                        :label="item.text"
                                        :value="item.text">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="会员级别" prop="hydj">
                            <el-select v-model="saveDatas.hydj" style="width:300px" placeholder="请选择">
                                <el-option label="" value=""></el-option>
                                <el-option
                                        v-for="item in datas['会员级别']['children']"
                                        :key="item.id"
                                        :label="item.text"
                                        :value="item.text">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="客户积分" prop="khjf">
                            <el-input v-model="saveDatas.khjf" style="width:300px"></el-input>
                        </el-form-item>
                        <el-form-item label="客户备注" prop="khbz">
                            <el-input v-model="saveDatas.khbz" style="width:300px"></el-input>
                        </el-form-item>
                        <el-form-item label="待回访时间" prop="dhfsj">
                            <el-date-picker
                                    style="width:300px"
                                    v-model="saveDatas.dhfsj"
                                    type="datetime"
                                    placeholder="选择日期时间"
                                    align="right"
                                    value-format="timestamp"
                                    :picker-options="dhfsjOptions">
                            </el-date-picker>
                        </el-form-item>
                    </el-form>
                </div>
            </fieldset>
        </div>
    </div>

</template>

<script>
    import selectArea_ from '../../../../common/js/select_area.js'
    export default {
        //khxxRefresh是刷新标志，params是参数
        // params:{
        //     ldhm:"",//来电号码
        //     keyup:true,//确定键按下了
        // },
        props: ['shadeClose','shadeOpen','searhDatas','searhDatas_','editClose','editOpen','params'],
        name: "index",
        data: function () {
            var that = this;
            return {
                labelPosition:"right",
                selectArea:selectArea_,
                rules:{//规则
                },
                shade:true,//遮罩
                editable:false,//编辑控制状态
                datas:{//字典查找
                    '职  业':{children:[]},
                    '客户质量':{children:[]},
                    '年龄段':{children:[]},
                    '客户来源':{children:[]},
                    '客户需求':{children:[]},
                    '会员级别':{children:[]},
                },
                defaultSaveDatas:{//需要保存的数据
                    id:"",
                    ldhm:"",
                    mtly:"",
                    bjhm:"",
                    zryy:"",
                    zxcp:"",
                    khmc:"",
                    khxb:'1',
                    nld:"",
                    zy:"",
                    sjhm:"",
                    jtdh:"",
                    gzdh:"",
                    zhld:"",
                    sfcsqx:[],
                    xxdz:"",
                    yzbm:"",
                    khzl:"",
                    khly:"",
                    khxq:"",
                    hydj:"",
                    khbz:"",
                    zzjxsj:"",
                    dhfsj:'',
                    khjf:"",
                    dbd:"",
                },
                saveDatas:{//需要保存的数据
                    id:"",
                    ldhm:"",
                    mtly:"",
                    bjhm:"",
                    zryy:"",
                    zxcp:"",
                    khmc:"",
                    khxb:'1',
                    nld:"",
                    zy:"",
                    sjhm:"",
                    jtdh:"",
                    gzdh:"",
                    zhld:"",
                    hmgsd:"",
                    sfcsqx:[],
                    xxdz:"",
                    yzbm:"",
                    khzl:"",
                    khly:"",
                    khxq:"",
                    hydj:"",
                    khbz:"",
                    zzjxsj:"",
                    dhfsj:'',
                    khjf:"",
                    dbd:"",
                },
                dhfsjOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
            }
        },
        watch:{
            shadeClose:function () {//遮罩关闭
                this.shade = false;//遮罩拿掉
            },
            shadeOpen:function () {//遮罩开启
                this.shade = true;
            },
            editClose:function () {//开启与关闭修改
                this.editable = true;
            },
            editOpen:function () {//开启与关闭修改
                this.editable = false;
            },
            searhDatas:function () {//查数据
                if (this.editable){//不能编辑，就不需要查询字典数据
                    this.searchLdhm();
                }else{//可以编辑，必须查询字典数据
                    //查找字典数据，然后填充到数据框里面
                    this.$message_.postTips(this,'','basic-information-system-dict/special-list',{CrmSystemDictSearch: {code_type_name: Object.keys(this.datas)}},null,(response)=>{
                        this.datas = response.data.data;
                        //查询来电号码
                        this.searchLdhm();
                    })
                }
            },
            "saveDatas.khmc":function(){try {this.$parent.$refs['lsjlydd'].saveOrderDatas.shr = this.saveDatas.khmc;}catch (e) {try {this.$parent.$parent.$refs['lsjlydd'].saveOrderDatas.shr = this.saveDatas.khmc;} catch (e) {}}},
            "saveDatas.yzbm":function(){try {this.$parent.$refs['lsjlydd'].saveOrderDatas.shryb = this.saveDatas.yzbm;}catch (e) {try {this.$parent.$parent.$refs['lsjlydd'].saveOrderDatas.shryb = this.saveDatas.yzbm;}catch (e) {}}},
            "saveDatas.sjhm":function(){try {this.$parent.$refs['lsjlydd'].saveOrderDatas.shrdh = this.saveDatas.sjhm;}catch (e) {try {this.$parent.$parent.$refs['lsjlydd'].saveOrderDatas.shrdh = this.saveDatas.sjhm;}catch (e) {}}},
            "saveDatas.sfcsqx":function(){try {this.$parent.$refs['lsjlydd'].saveOrderDatas.sfcsqx = this.saveDatas.sfcsqx;}catch (e) {try {this.$parent.$parent.$refs['lsjlydd'].saveOrderDatas.sfcsqx = this.saveDatas.sfcsqx;}catch (e) {}}},
            "saveDatas.xxdz":function(){try {this.$parent.$refs['lsjlydd'].saveOrderDatas.xxdz = this.saveDatas.xxdz;}catch (e) {try {this.$parent.$parent.$refs['lsjlydd'].saveOrderDatas.xxdz = this.saveDatas.xxdz;}catch (e) {}}},
            "saveDatas.khbz":function(){try {this.$parent.$refs['lsjlydd'].saveOrderDatas.bz = this.saveDatas.khbz;}catch (e) {try {this.$parent.$parent.$refs['lsjlydd'].saveOrderDatas.bz = this.saveDatas.khbz;}catch (e) {}}},
        },
        methods:{
            searchLdhm: function () {//查找来电号码
                if (this.searhDatas_!="" && this.searhDatas_!=undefined){//如果直接传递数据过来，就直接赋给变量
                    if(typeof this.searhDatas_.sfcsqx == "string"){
                        this.searhDatas_.sfcsqx = JSON.parse(this.searhDatas_.sfcsqx);
                    }
                    this.saveDatas = this.searhDatas_;
                    this.$parent.params.mtly = this.saveDatas.mtly;
                    this.$parent.params.bjhm = this.saveDatas.bjhm;
                    this.$parent.params.zryy = this.saveDatas.zryy;
                    this.$parent.params.zxcp = this.saveDatas.zxcp;
                    this.$parent.params.gtnr = this.saveDatas.gtnr;
                    this.saveDatas.zzjxsj = this.$my_.getTimeStamp(new Date());//最早进线时间
                }else{
                    if (this.params.ldhm!="" || this.params.id!="") {
                        //到了这里表示客户信息要输入了
                        this.$message_.postTips(this,"",'crm-hot-center-hwzx/find-ldhm',{CrmHwzxSearch:{ldhm:this.params.ldhm,id:this.params.id}},null,(response)=>{
                            if (Object.keys(response.data.data).length) {
                                this.saveDatas = response.data.data;
                                // }else{
                                //     this.saveDatas = {//需要保存的数据
                                //         id:"",
                                //         ldhm:"",
                                //         mtly:"",
                                //         bjhm:"",
                                //         zryy:"",
                                //         zxcp:"",
                                //         khmc:"",
                                //         khxb:'1',
                                //         nld:"",
                                //         zy:"",
                                //         sjhm:"",
                                //         jtdh:"",
                                //         gzdh:"",
                                //         zhld:"",
                                //         hmgsd:response.data.data.hmgsd==undefined?'':response.data.data.hmgsd,
                                //         sfcsqx:[],
                                //         xxdz:"",
                                //         yzbm:"",
                                //         khzl:"",
                                //         khly:"",
                                //         khxq:"",
                                //         hydj:"",
                                //         khbz:"",
                                //         zzjxsj:"",
                                //         dhfsj:'',
                                //         khjf:"",
                                //         dbd:"",
                                //     };
                                // }
                                this.$parent.params.mtly = this.saveDatas.mtly;
                                this.$parent.params.bjhm = this.saveDatas.bjhm;
                                this.$parent.params.zryy = this.saveDatas.zryy;
                                this.$parent.params.zxcp = this.saveDatas.zxcp;
                                this.$parent.params.gtnr = this.saveDatas.gtnr;
                                this.saveDatas.zzjxsj = this.$my_.getTimeStamp(new Date());//最早进线时间
                            }
                        })
                    }
                }
            },
        },
    }
</script>